<template>
    <div>
      <h1>孙子组件</h1>
      <h2>{{ info }}</h2>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, inject, Ref, toRaw, toRefs } from "vue";
  
  export default defineComponent({
    setup() {
      const info = inject<Ref<string>>("info");
      console.log(info); 
      console.log(info?.value);
      const num = inject<Ref<number>>("num");
      console.log(num?.value);
      interface inObj {
        name: string;
        age: number;
      }
      const obj = inject<inObj>("obj");
      console.log(obj);
      console.log(obj?.name);
      return {
        info,
      };
    },
  });
  </script>
  
  <style scoped>
  </style>